<template>
  <div class="contractfeedback-page">
    <Detail :title="title"></Detail>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="detail-agreement">
        <div class="agreement-title">合同/协议执行</div>
        <div class="agreement-content">
          <el-form-item label="执行情况:" prop="region">
            <el-select v-model="ruleForm.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-input v-model="ruleForm.why" placeholder="其他请填写原因"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="执行金额:" prop="glod">
          <el-input v-model="ruleForm.glod"></el-input>
        </el-form-item>
        <el-form-item label="实施情况:" prop="text">
          <el-input
            type="textarea"
            v-model="ruleForm.text"
            maxlength="2000"
            show-word-limit
            placeholder="请填写情况介绍"
          ></el-input>
        </el-form-item>
      </div>
      <div class="detail-agreement">
        <div class="agreement-title">填写人信息</div>
        <el-form-item label="填表人:" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
      </div>
      <div class="bnt">
        <button type="button" @click="submit('ruleForm','upload')" class="submit">提交审核</button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: {
        titleAll: "2020中国国际贸易服务交易会 合同/协议项目追踪反馈表",
        titleOne: "合同/协议方",
        titleTwo: "发布成果名称",
        titleThree: "发布成果名称",
        titleEnd: "合同/协议金额"
      },
      ruleForm: {
        username: "",
        phone: "",
        region: "",
        glod: "",
        text: "",
        why: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[34578]\d{9}$/,
            message: "请输入正确的电话号码",
            trigger: "blur"
          }
        ],
        region: [
          { required: true, message: "请选择执行情况", trigger: "change" }
        ],
        glod: [
          {
            type: "number",
            required: true,
            message: "请填写数字",
            trigger: "change"
          }
        ],
        text: [
          {
            type: "string",
            required: true,
            message: "请填写情况介绍",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style lang="scss" scoped >
.contractfeedback-page {
  width: 88%;
  background: #fff;
  margin: 0 auto;
}
.detail-list {
  width: 100%;
  padding-left: 10%;
}
//  .el-input{
//      width: 400px !important;
//  }
.el-textarea {
  width: 60% !important;
}
.el-form-item {
  margin-left: 13% !important;
}
.detail-agreement {
  padding: 10px 0 0 0;
  margin-top: 30px;
  border-top: 1px dotted #d9e1e9;
  .agreement-title {
    padding-left: 6px;
    border-left: 4px solid #fe8c01;
  }
}
//  .but{
//         width: 300px;
//         height: 35px;
//         text-align: center;
//         margin: 40px auto;
//         background:linear-gradient(90deg,rgba(255,192,2,1) 0%,rgba(254,140,1,1) 100%);
//         color:#fff;
//         border:1px solid #D9E1E9;
//     }
.submit {
  width: 171px;
  height: 40px;
  margin-right: 46px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}
.save {
  width: 171px;
  height: 40px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
select {
  margin-right: 10px;
  width: 120px;
  height: 32px;
  outline: none;
  border: 1px solid #d9e1e9;
}
textarea {
  min-width: 480px;
  min-height: 186px;
  outline: none;
  border: 1px solid #d9e1e9;
}
.ipt-user-min {
  width: 30%;
  height: 32px;
  border: 1px solid #d9e1e9;
  padding-left: 10px;
  outline: none;
}
</style>
